<template>
  <div class="company-list-1">
    <div class="header">
      <img class="header-img" src="@/assets/line.svg"/>
      <img class="header-img" src="@/assets/line.svg"/>
      <img class="header-img" src="@/assets/line.svg"/>
      <div class="header-title">出栏点数异常事件</div>
    </div>
    <div class="content">
      <el-table
          ref="myTable"
          :data="props.info"
          :row-style="{ height: '20px' }"
          :cell-style="{ padding: '0px' }"
          style="width: 320px; height: 280px"
          :header-cell-style="{ 'text-align': 'center' }"
          :row-class-name="tableRowClassName"
          @mouseover.native="clearScroll"
          @mouseleave.native="createScroll"
      >
        <el-table-column label="#" width="30" align="center">
          <template #default="{ $index }">
            {{ $index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="rearerName" width="60" label="养户" align="center"/>
        <el-table-column prop="recycleNum" width="90" label="回收数" align="center"/>
        <el-table-column prop="aiPoints" width="80" label="AI点数" align="center"/>
        <el-table-column prop="difference" width="60" label="差异" align="center">
          <template #default="scope">
            <div style="color: red">{{ scope.row.difference }}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted, onUnmounted} from 'vue'

const props = defineProps({
  info: {
    type: Object,
    default: () => {
    }
  }
})

// 斑马纹
const tableRowClassName = ({row, rowIndex}) => {
  if (rowIndex % 2 == 0) {
    return ''
  } else {
    return 'warning-row'
  }
}

// 表格内容自动滚动
let timer = null
let myTable = ref(null)
const clearScroll = () => {
  clearInterval(timer)
  timer = null
}
const createScroll = () => {
  clearScroll()
  // 拿到 table
  const table = myTable.value.layout.table.refs
  // 拿到可以滚动的元素
  const tableWrapper = table.bodyWrapper.firstElementChild.firstElementChild

  timer = setInterval(() => {
    tableWrapper.scrollTop += 1
    // 判断是否滚动到底部，如果到底部了置为0（可视高度+距离顶部=整个高度）
    if (tableWrapper.clientHeight + tableWrapper.scrollTop == tableWrapper.scrollHeight) {
      tableWrapper.scrollTop = 0
    }
  }, 100)
}

onMounted(() => {
  createScroll()
})

onUnmounted(() => {
  clearScroll()
})
</script>

<style scoped lang="scss">
@import '@/assets/table.css';

.company-list-1 {
  border: #354e85 solid 1px;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid #354e85;
  margin-bottom: 20px;
  background-color: rgba($color: #fff, $alpha: 0.1);

  .header {
    background: url('@/assets/u25.svg') no-repeat center center;
    width: 350px;
    height: 50px;
    display: flex;
    align-items: center;
    padding-left: 20px;

    .header-img {
      height: 15px;
      width: 13px;
      margin-left: -4px;
    }

    .header-title {
      color: #51f4f3;
      padding-left: 10px;
    }
  }

  .content {
    flex: 1;
    display: flex;
    padding: 10px;
  }
}
</style>
